<template>
  <div class="summary-area">
    <el-descriptions
      v-if="showDescription"
      :column="2"
      :size="size"
      border
      ref="form"
    >
      <el-descriptions-item label="活动标题">
        {{ form.activityTitle }}
      </el-descriptions-item>

      <el-descriptions-item label="活动类型">
        <el-select
          v-model="form.activityTypeId"
          placeholder="请选择活动类型"
          disabled
        >
          <el-option
            v-for="dict in dict.type.activity_type"
            :key="dict.value"
            :label="dict.label"
            :value="parseInt(dict.value)"
          ></el-option>
        </el-select>
      </el-descriptions-item>

      <el-descriptions-item label="开始时间">
        <el-date-picker
          clearable
          v-model="form.activityStartTime"
          type="datetime"
          format="yyyy年MM月dd HH:mm"
          value-format="yyyy-MM-dd HH:mm:ss"
          popper-class="no-atTheMoment"
          placeholder="请选择开始时间"
          disabled
        ></el-date-picker>
      </el-descriptions-item>

      <el-descriptions-item label="结束时间">
        <el-date-picker
          clearable
          v-model="form.activityEndTime"
          type="datetime"
          format="yyyy年MM月dd HH:mm"
          value-format="yyyy-MM-dd HH:mm:ss"
          popper-class="no-atTheMoment"
          placeholder="请选择结束时间"
          disabled
        ></el-date-picker>
      </el-descriptions-item>

      <el-descriptions-item label="活动内容" span="3">
        <quill-editor v-model="form.activityContent"></quill-editor>
      </el-descriptions-item>

      <el-descriptions-item label="上级部门">
        {{ form.activityScope }}
      </el-descriptions-item>

      <el-descriptions-item label="参与人" span="2">
        {{
          form.activityParticipants.map((p) => p.activityParticipant).join(", ")
        }}
      </el-descriptions-item>

      <a-calendar v-model:value="value">
        <template #dateCellRender="{ current: value }">
          <ul class="events">
            <li v-for="item in getListData(value)" :key="item.content">
              <a-badge :status="item.type" :text="item.content" />
            </li>
          </ul>
        </template>
        <template #monthCellRender="{ current: value }">
          <div v-if="getMonthData(value)" class="notes-month">
            <section>{{ getMonthData(value) }}</section>
            <span>Backlog number</span>
          </div>
        </template>
      </a-calendar>
    </el-descriptions>

    <!-- 添加样式并包裹按钮组 -->
    <div class="button-container">
      <div class="button-group">
        <el-button type="primary" @click="submitForm" disabled>提交</el-button>
        <el-button @click="handleClose">返回</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { listCheckActivities } from "@/api/activity/checkActivities";
import { getActivities } from "@/api/activity/activities";
import { listDept } from "@/api/system/dept";
import { getDept } from "../../../api/system/dept";

export default {
  name: "SummaryLog",
  dicts: ["activity_type"],
  data() {
    return {
      size: "",
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 用于存放从后端获取的所有部门选项
      deptOptions: [],
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      showDescription: true,

      // 总条数
      total: 0,
      // 调用活动日志表格数据
      activitiesList: [],
      // 是否显示弹出层
      open: false,
      // 日期范围
      dateRange: [],
      // 表单参数
      form: {
        activitySummary: null,
        activityAvgPoint: 0.0,
        activityId: null,
        activityTitle: null,
        activityContent: null,
        activityTypeId: null,
        activityStartTime: null,
        activityEndTime: null,
        activityProgress: null,
        activityInitiator: null,
        activityInitiatorId: null,
        activityInitiationTime: null,
        activityUpdateTime: null,
        activityReviewer: null,
        activityReviewTime: null,
        activityReviewComment: null,
        activityReviewStatus: null,
        activityScope: "",
        deptName: null,
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        status: undefined,
      },
    };
  },
  mounted() {
    this.fetchDeptList();
  },
  created() {
    const activityId = this.$route.params.activityId;
    if (activityId !== 0) {
      getActivities(activityId)
        .then((response) => {
          const deptId = response.data.activityScope;

          // 保存活动数据，稍后合并部门数据
          const activityData = response.data;

          getDept(deptId)
            .then((deptResponse) => {
              const idName = deptResponse.data.deptName;
              console.log("活动名", idName);

              // 合并部门数据到活动数据
              activityData.activityScope = idName;

              // 将合并后的数据赋值给 this.form
              this.form = activityData;

              // 获取活动的表格数据
              this.getList(activityId);
            })
            .catch((error) => {
              console.error("获取部门信息失败", error);
            });
        })
        .catch((error) => {
          console.error("获取活动详情失败", error);
        });
    } else {
      this.getList(); // 若 activityId 为 0，则直接调用 getList 获取默认的活动表格数据
    }
  },

  methods: {
    fetchDeptList() {
      // ListDept是获取部门列表的API调用
      listDept().then((response) => {
        this.deptOptions = response.data; // 假设返回的数据直接赋值给deptOptions
        // 在获取到部门列表后，尝试根据activityScope更新显示名称
        this.updateActivityScopeName();
      });
    },
    updateActivityScopeName() {
      if (this.form.activityScope && this.deptOptions.length > 0) {
        const matchedDept = this.deptOptions.find(
          (dept) => dept.deptId === this.form.activityScope
        );
        if (matchedDept) {
          // 如果找到匹配的部门，直接显示名称
          this.form.activityScope = matchedDept.deptName;
        } else {
          console.warn(`未找到ID为${this.form.activityScope}的部门`);
        }
      }
    },
    /** 查询活动日志列表 */
    getList() {
      this.loading = true;
      this.queryParams.params = {};
      if (
        null != this.daterangeActivityInitiationTime &&
        "" != this.daterangeActivityInitiationTime
      ) {
        this.queryParams.params["beginActivityInitiationTime"] =
          this.daterangeActivityInitiationTime[0];
        this.queryParams.params["endActivityInitiationTime"] =
          this.daterangeActivityInitiationTime[1];
      }
      if (
        null != this.daterangeActivityUpdateTime &&
        "" != this.daterangeActivityUpdateTime
      ) {
        this.queryParams.params["beginActivityUpdateTime"] =
          this.daterangeActivityUpdateTime[0];
        this.queryParams.params["endActivityUpdateTime"] =
          this.daterangeActivityUpdateTime[1];
      }
      if (
        null != this.daterangeActivityReviewTime &&
        "" != this.daterangeActivityReviewTime
      ) {
        this.queryParams.params["beginActivityReviewTime"] =
          this.daterangeActivityReviewTime[0];
        this.queryParams.params["endActivityReviewTime"] =
          this.daterangeActivityReviewTime[1];
      }
      listCheckActivities(this.queryParams).then((response) => {
        this.checkActivitiesList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 返回按钮
    handleClose() {
      const obj = { path: "/activity/summary" };
      this.showDescription = false;
      this.$tab.closeOpenPage(obj);
    } /** 提交按钮 */,
  },
};
</script>
<style lang="scss">
.summary-area {
  background-color: #fff; /* 或者您希望的背景色 */
  padding: 20px; /* 可以调整内外边距，使得内容与容器边框更加贴合 */
}

.summary-area .el-descriptions {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果，提升层次感 */
  border-radius: 4px; /* 添加圆角，让边框看起来更加柔和 */
}

.summary-area .el-descriptions.is-bordered {
  border: 1px solid #ebeef5; /* 可根据需要调整边框颜色和宽度 */
}

.summary-area .el-descriptions__border {
  border-bottom: none !important; /* 若需要去除内部行间的分割线 */
}

.summary-area .el-descriptions-item__label {
  background-color: transparent; /* 可能需要根据Element UI版本调整标签背景色 */
  padding-right: 16px; /* 调整标签与内容之间的间距 */
}
.ql-editor {
  height: 192px;
}
.button-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  margin-top: 16px; /* 或者根据需要设置合适的距离，例如 16px 间距 */
}

.button-group {
  display: inline-flex; /* 使按钮在同一行排列 */
  gap: 8px; /* 按钮之间的间距 */
}
</style>
